<template>
<el-dialog
  :title="title"
  :visible="visible"
   width="430px" append-to-body
  @close="close" :close-on-click-modal="false">
  <el-form :model="form" :rules="rules" ref="form" :inline="false" label-width="80px">
    <el-form-item label="地区" prop="areaId">
        <tree-select
            ref="treeSelect"
            :width="280"
            :checkedKeys="checkedKeys"
            placeholder="请选择地区"
            :text-formatter="val => `${val ? val.text : ''}`"
            :data="areaList"
            @change="change"
            :defaultProps="{
              id: 'id',
              children: 'children',
              label: 'text'
            }">
       </tree-select>
    </el-form-item>
    <el-form-item label="监测车" prop="pointCode">
        <el-select v-model="form.pointCode"
        placeholder="请选择监测车" style="width:280px">
            <el-option
            v-for="item in carlist"
            :key="item.pointCode"
            :label="item.pointName"
            :value="item.pointCode">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="人员姓名" prop="userName">
        <el-input placeholder="请输入人员姓名" v-model="form.userName"  style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="单位">
        <tree-select
            ref="treeSelectDept"
            :width="280"
            :checkedKeys="deptCheckedKeys"
            placeholder="请选择单位"
            :text-formatter="val => `${val ? val.text : ''}`"
            :data="deptList"
            @change="deptChange"
            :defaultProps="{
              id: 'id',
              children: 'children',
              label: 'text'
            }">
       </tree-select>
    </el-form-item>
    <el-form-item label="电话">
        <el-input placeholder="请输入电话" v-model="form.userMobile" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="职务">
        <el-input placeholder="请输入职务" v-model="form.post" style="width:280px"></el-input>
    </el-form-item>
    <!-- <el-form-item label="头像">
         <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item> -->
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>

export default {
  props: {
    tree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      content: '',
      visible: false,
      title: '通信录添加',
      loading: false,
      isEdit: false,
      areaList: [],
      deptList: [],
      carlist: [],
      checkedKeys: [],
      deptCheckedKeys: [],
      form: {
        post: '',
        pointCode: '',
        areaId: '',
        areaName: '',
        departId: '',
        departName: '',
        userAvatarUrl: '',
        userEmail: '',
        userId: '',
        userMobile: '',
        userName: '',
        userStatus: '',
        userTel: ''
      },
      rules: {
        areaId: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请输入人员', trigger: 'blur' }
        ],
        pointCode: [
          { required: true, message: '请选择监测车', trigger: 'change' }
        ]
      }

    };
  },
  computed: {

  },
  methods: {
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      });
    },
    getDept() {
      const params = {
        url: `/api/ems/dept/list`,
        type: 'post',
        params: {}

      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.deptList = rows;
        }
      });
    },
    async submit() {
      await this.validForm();
      const isEdit = this.isEdit;
      const url = isEdit
        ? '/api/ems/meeting/contact/update'
        : `/api/ems/meeting/contact/add`;
      const params = {
        url,
        type: 'post',
        params: this.form

      };
      this.loading = true;
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { result } = resp;
        if (result) {
          this.$message({
            message: '操作成功!',
            type: 'success'
          });
          this.close();
          this.$emit('refresh');
        }
      });
    },
    change(val) {
      if (val) {
        this.form.areaId = val.id;
        this.form.areaName = val.text;
      }
    },
    deptChange(val) {
      console.log(val);
      if (val) {
        this.form.departId = val.id;
        this.form.departName = val.text;
      }
    },
    getAreaList() {
      const params = {
        url: `/api/ems/area/childlist`,
        type: 'post',
        params: this.form

      };
      this.$ajax(params).then(resp => {
        console.log(`getAreaList`, resp);
        const { result, rows } = resp;
        if (result) {
          this.areaList = rows;
        }
      });
    },
    getCarList() {
      const params = {
        url: `/api/ems/station/dropdown`,
        type: 'post',
        params: this.form
      };
      this.$ajax(params).then(resp => {
        this.carlist = resp;
      });
    },
    openDialog() {
      this.isEdit = false;
      this.visible = true;
      this.title = '通信录添加';
    },
    openDialogByEdit(row) {
      console.log('row', row);
      this.isEdit = true;
      this.visible = true;
      this.title = '编辑录添加';
      for (const key in row) {
        this.form[key] = row[key];
      }
      this.checkedKeys = row.areaId ? [row.areaId] : [];
      this.deptCheckedKeys = row.departId ? [row.departId] : [];
      this.form.pointCode = this.form.pointCode + '';
    },
    close() {
      this.visible = false;
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.checkedKeys = [];
      this.deptCheckedKeys = [];
      this.$refs.form.resetFields();
    }

  },
  created() {
    this.getAreaList();
    this.getCarList();
    this.getDept();
  }
};
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>